<template>
	<view>
		<view class="kjmderty">
			<view class="status_bar"></view>
			<view class="pd pt20 pm20 row">
				<view class="col row">
					<uni-icons type="left" color="#fff" size="20" class="cz" @tap="huitsd"></uni-icons>
					<picker @change="bindPickerChange" :value="index" :range="array" class="dsftyswert">
						<text class="cf fz32 ml20">{{array[index]}}</text>
						<uni-icons type="down" color="#fff" class="ml20"></uni-icons>
					</picker>
				</view>
				<view class="cf fz30 mt10" @tap="hjhsd">
					筛选
				</view>
			</view>
		</view>
		<view class="pd pr mt30 pm40">
			<view class="pr">
				<icon type="search" class="kjjnxeert"></icon>
				<input type="text" confirm-type="search" value="" class="drrtysert" placeholder="如：驾驶员姓名" />
			</view>
			<uni-swipe-action  v-if="ctlist.length>0">
				<uni-swipe-action-item :options="options1" @tap="bindClick" class="mt30 kkmxeeerrtt" v-for="sd in 10">
					<navigator class="neijjseer" url="/pages/leftSideMenu/TripReportxq">
						<view class="fz26 z6 ">
							2020年01月02日 12:00
						</view>
						<view class="mt20 row dfgtywert">
							<image src="~@/static/img/usericon.png" mode="widthFix" class="yj jhheeert cz"></image>
							<text class="ml20 z3 fz32">张里</text>
							<text class="ml20 fz32" v-if="array[index]=='全部车辆'">鲁A·4V444</text>
							<text class="ml90 fz40 b">9.0</text>
							<text class="fz28 ml5">分</text>
						</view>
						<view class="mt30 pr30">
							<view class="jjhsdflist row">
								<view class="juhhseeetrt yj cz"></view>
								<view class="dian col fz30 z3 pl20 cz">
									济南历下区山大路16号印象城南门
								</view>
							</view>

							<view class="jjhsdflist row mt20">
								<view class="juhhseeetrt yj cz ab"></view>
								<view class="dian col fz30 z3 pl20 cz">
									济南长清区长清大学城大学路16号印象城南门
								</view>
							</view>

						</view>

						<view class="mt40 row cen">
							<view class="col z9 fz24">
								平均速度
								<view class="z9 mt10">
									<text class="z3 fz32 mr10 b xt">2</text> km/h
								</view>
							</view>
							<view class="col z9 fz24">
								里程数
								<view class="z9 mt10">
									<text class="z3 fz32 mr10 b xt">2</text> km
								</view>
							</view>
							<view class="col z9 fz24">
								总用时
								<view class="z9 mt10">
									<text class="z3 fz32 mr10 b xt">2</text> h
								</view>
							</view>
						</view>
						<uni-icons type="right" class="ojjkeeer" size="20"></uni-icons>
					</navigator>
				</uni-swipe-action-item>
			</uni-swipe-action>
			
			
			
			<view class="cen z9 fz30 cen mt100" v-if="ctlist.length<=0">
				<view class="llknnneert pr">
					<image src="../../static/img/qs/dddda.png" class="jjjhnmnxerrta cz"></image>
					<image src="../../static/img/qs/ddddb.png" class="jjnnkxerrae"></image>
				</view>
				暂无行程报告
			</view>
		</view>

		<view class="bghhseet"></view>
	</view>
</template>
<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'

	export default {
		data() {
			return {
				index: 1,
				array: ['鲁A·66666', '鲁A·4V444', '鲁A·99999', '全部车辆'],
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#1689D5'
					}
				}],
				ctlist:[]
			}
		},
		components: {
			uniSwipeAction,
			uniSwipeActionItem
		},
		methods: {
			bindPickerChange(e) {
				this.index = e.target.value
			},
			bindClick() {
				uni.showToast({
					title: "删除成功！"
				})
			},
			hjhsd() {
				uni.navigateTo({
					url: "/pages/leftSideMenu/screen"
				})
			},
			huitsd(){
				uni.navigateBack({
					delta:1
				})
			}
		},
		mounted() {}
	}
</script>
<style scoped>
	.seertty {
		width: 40upx;
		height: 40upx;
	}

	.bghhseet {
		background-color: #E8E8E8;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.kjmderty {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 1000;
		background-color: #191D29;
	}

	.drrtysert {
		height: 106upx;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 12upx;
		padding-left: 100upx;
	}

	.kjjnxeert {
		position: absolute;
		left: 30upx;
		top: 30upx;
	}

	.kkmxeeerrtt {
		height: 442upx;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
		border-radius: 12upx;
		margin-top: 30upx;

		position: relative;
	}

	.neijjseer {
		padding: 30upx;
	}

	.jhheeert {
		width: 72upx;
		height: 72upx;
	}

	.dfgtywert {
		line-height: 72upx;
	}

	.juhhseeetrt {
		width: 14upx;
		height: 14upx;
		background-color: #1689D5;
		margin-top: 14upx;
	}

	.juhhseeetrt.ab {
		background-color: #09FFAB;
	}

	.ojjkeeer {
		position: absolute;
		right: 20upx;
		top: 208upx;
	}
	
	.dsftyswert{
		position: relative;
		bottom: 4upx;
	}
</style>
